<template>
	<view class="page">
		<view class="uni-grid-9">
			<view class="uni-grid-9-item" @tap="getGrids(index, item.name)"  hover-class="uni-grid-9-item-hover" v-for="(item,index) in grids" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''" :loading="loading">
				<text class="uni-grid-9-text game-name">{{ item.game }}</text>
				<text class="uni-grid-9-text game-money">￥: {{ item.money }}</text>
			</view>
		</view>

		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="list-left">
					转换方式：
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="platems">
						<view class="uni-input">{{platems[index]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="list-left">
					输入金额：
				</view>
				<view class="uni-list-cell-db price">
					<input class="uni-input" type="number" @input="bindKeyInput" v-model="amount" placeholder="请输入转化金额：￥" />

				</view>
			</view>
		</view>
		<view class="btn-area">
			<button @tap="moneyCharge(amount)" type="primary" class="text m-right m-top" style="flex: 1;" :loading="loading">
				额度转化
			</button>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {

			return {
				index: '0',
				amount: '',
				mainAccount: '',
				money: '',
				reload: false,
				platems: ['白沙转主账号', 'DS转主账号', 'KY转主账号', 'PG转主账号', 'VR转主账号', 'BBIN转主账号', '主账号转白沙', '主账号转DS', '主账号转PG', '主账号转KY', '主账号转VR', '主账号转BBIN'],
				datas: [{
					"inaccount": "_main",
					"outaccount": "baisha",
				}, {
					"inaccount": "_main",
					"outaccount": "ds",
				}, {
					"inaccount": "_main",
					"outaccount": "ky",
				}, {
					"inaccount": "_main",
					"outaccount": "pg",
				}, {
					"inaccount": "_main",
					"outaccount": "vr",
				}, {
					"inaccount": "_main",
					"outaccount": "bbin",
				}, {
					"inaccount": "baisha",
					"outaccount": "_main",
				}, {
					"inaccount": "ds",
					"outaccount": "_main",
				}, {
					"inaccount": "pg",
					"outaccount": "_main",
				}, {
					"inaccount": "ky",
					"outaccount": "_main",
				}, {
					"inaccount": "vr",
					"outaccount": "_main",
				}, {
					"inaccount": "bbin",
					"outaccount": "_main",
				}],
				grids: [{
					"game": "主账户",
					"money": "0",
					"name": "_main"
				}, {
					"game": "白沙视讯",
					"money": "0",
					"name": "baisha"
				}, {
					"game": "DS视讯",
					"money": "0",
					"name": "ds"
				}, {
					"game": "PG电子",
					"money": "0",
					"name": "pg"
				}, {
					"game": "开元棋牌",
					"money": "0",
					"name": "ky"
				}, {
					"game": "VR彩票",
					"money": "0",
					"name": "vr"
				}, {
					"game": "BBIN",
					"money": "0",
					"name": "bbin"
				}],
				loading: false,
			}
		},
		computed: mapState(['mainMoney', 'hasLogin', 'userName', 'apiUrl', 'gameApiUrl', 'gameApiId', 'gameApiSecret',
			'token'
		]),
		onLoad() {
			this.getData();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.getData();
		},
		
		methods: {
			...mapMutations(['storeMoney']),
			getData() {
					for (let i = 0; i < this.grids.length; i++) {
						this.getGrids(i, this.grids[i].name)
					}
			},
			getGrids: function(index, platform) {
				const data = {
					platform: platform,
					token: this.token,
					f: 1,
				};
				uni.request({
					url: this.apiUrl + 'app/balance',
					data: data,
					method: 'POST',
					success: (data) => {
						if (data.data.code == 1) {
							this.grids[index].money = data.data.data;
							if(index==0){
								this.storeMoney(data.data.data);
							}
							//console.log('5525r' + this.grids[index].money);
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: () => {
						this.loading = false
					}
				
				})
			},
			moneyCharge: function(e) {
				if (this.amount.length < 1) {
					uni.showToast({
						icon: 'none',
						title: '金额不能为空'
					});
					return;
				}

				const data = {
					inaccount: this.datas[this.index].inaccount,
					outaccount: this.datas[this.index].outaccount,
					money: this.money,
					token: this.token,
				};
				this.loading = true;
				uni.request({
					url: this.apiUrl + 'app/transfer',
					data: data,
					method: 'POST',
					success: (data) => {
						let msg = data.data.msg;
						uni.showToast({
							icon: 'none',
							title: msg
						});
						if (data.data.code == 1) {
                            this.getData();
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: () => {
						this.loading = false
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindKeyInput: function(e) {
				this.money = e.target.value
				console.log(this.money);

			},

		}
	}
</script>

<style>
	.uni-grid-9 {
		background: white;
	}

	.uni-grid-9-text {
		height: auto;
	}

	.page {
		padding-top: 2upx;
		background: white;
	}

	.game-name {
		font-size: 45upx;
		height: auto;
		margin-bottom: 20upx;
		line-height: 45upx;

	}

	.game-money {
		margin-top: 10upx;
		line-height: 50rpx;
	}

	.uni-list-cell {
		height: 90upx;
		padding-left: 30rpx;

	}

	.uni-list-cell-db {
		padding-left: 30upx;
	}
</style>
